<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        banner管理
                    </div>
                    <div class="screen clear">
                        <div class="fl" @click="screen()">新增</div>
                    </div>
                    <div class="publicTable toLongTable">
                        <table class="head_table">
                            <tr>
                                <td width="5%">序号</td>
                                <td width='5%'>模块</td>
                                <td width='12%'>缩略图</td>
                                <td width='7%'>跳转地址</td>
                                <td width='10%'>主题</td>
                                <td width='7%'>显示状态</td>
                                <td width='12%'>操作</td>
                            </tr>
                        </table>
                        <el-scrollbar>
                            <table class="content_table">
                                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                                    <td width="5%">{{index+1}}</td>
                                    <td width='5%' v-if="item.mod==1">走马灯</td>
                                    <td width='5%' v-else-if='item.mod==2'>首页推荐</td>
                                     <td width='5%' v-else-if='item.mod==3'>医学课堂</td>
                                    <td width='12%'><img :src=item.img_url alt=""></td>
                                    <td width='7%'>
                                        {{item.data}}
                                    </td>
                                    <td width='10%'>{{item.title}}</td>
                                    <td width='7%' v-if="item.status==1">显示</td>
                                    <td width='7%' v-else>隐藏</td>
                                    <td width='12%' class="operation">
                                        <span class="active" @click="editShow(item)">编辑</span>
                                        <span class="active" v-if="item.status==2" @click="showBanner(item.id)">显示</span>
                                        <span class="active" v-if="item.status==1" @click="hideBanner(item.id)">隐藏</span>
                                        <span class="active" @click="removeBanber(item.id)">删除</span>
                                    </td>
                                </tr>
                            </table>
                        </el-scrollbar>
                    </div>
                    <div class="nodataTip" v-if="showNodataTip">
                        <i class="iconfont icon-zanwuneirong"></i>
                        <h5>暂无内容</h5>
                    </div>
                    <div class="orderBotom">
                        <div class="orderBotomRight">
                            <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-menban" v-if="showSystemPopup"></div>
            <div class="systemPopup" v-if="showSystemPopup">
                <div class="topTitle">
                    <span>{{systemPopupTitle}}</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup()"></i>
                </div>
                <div class="addBannerPupup">
                    <div class="bannerContent clear">
                        <span class="leftTitle">选择模块</span>
                        <div class="rightContent">
                            <el-select v-model="moudelType" placeholder="请选择">
                                <el-option v-for="item in moudelOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="bannerContent clear">
                        <span class="leftTitle">选择图片</span>
                        <div class="rightContent">
                            <label class="chooseBanner" for="uploads">选择图片</label>
                            <input type="file" name="img" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/jpg" @change="uploadImg($event)">
                        </div>
                    </div>
                    <div class="bannerContent clear">
                        <span class="leftTitle">缩略图</span>
                        <div class="rightContent" :style="thumbnailStyle">
                            <div class="thumbnailBox">
                                <img :src=imgUrl alt="">
                            </div>

                        </div>
                    </div>
                    <div class="bannerContent clear">
                        <span class="leftTitle">类型</span>
                        <div class="rightContent">
                            <el-radio v-model="urlType" label="1">url链接</el-radio>
                            <el-radio v-model="urlType" label="2">任务跳转</el-radio>
                        </div>
                    </div>
                    <div class="bannerContent clear">
                        <span class="leftTitle">跳转地址</span>
                        <div class="rightContent">
                            <el-input v-model.trim="url" placeholder="请输入链接"></el-input>
                        </div>
                    </div>
                    <div class="bannerContent clear">
                        <span class="leftTitle">主题</span>
                        <div class="rightContent">
                            <el-input v-model.trim="title" placeholder="请输入主题"></el-input>
                        </div>
                    </div>
                    <div class="system-messagebox1-btn clear">
                        <div @click="addBanner()" v-if="editType==1">添加</div>
                        <div @click="editBanner()" v-if="editType==2">保存</div>
                        <div @click="hideSystemPopup()">取消</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import banner from "@/api/banner";
import pubilc from "@/api/pubilc";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "banner",
      pages: 1,
      listData: [],
      totalnum: 0,
      showNodataTip: false,
      showSystemPopup: false,
      systemPopupTitle: "新增banner",
      thumbnailStyle: {
        backgroundImage: "url(" + require("./images/simg.png") + ")",
        backgroundSize: "150px 130px"
      },
      moudelType: "",
      moudelOptions: [
        {
          value: 1,
          label: "走马灯位置"
        },
        {
          value: 2,
          label: "首页推荐任务"
        },
        {
          value: 3,
          label: "医学课堂列表"
        }
      ],
      urlType: "",
      url: "",
      title: "",
      editType: 1,
      bannerId: "",
      imgUrl: "",
    };
  },
  methods: {
    uploadImg(event) {
      this.thumbnailStyle.backgroundImage = "";
      let demos = event.currentTarget.files[0];
      var formdata1 = new FormData();
      formdata1.append("file", demos);
      formdata1.append("type", "12");
      pubilc.uploadImg(formdata1).then(res => {
        if (res.code == 1) {
          this.imgUrl = res.data.file.full_path;
        }
      });
    },
    addBanner() {
      if (this.moudelType == "") {
        this.$message({
          showClose: true,
          message: "请选择模块！",
          type: "error"
        });
      }
      if (this.urlType == "") {
        this.$message({
          showClose: true,
          message: "请选择类型！",
          type: "error"
        });
      }
      if (this.url == "") {
        this.$message({
          showClose: true,
          message: "请输入链接！",
          type: "error"
        });
      }
      if (this.title == "") {
        this.$message({
          showClose: true,
          message: "请输入主题！",
          type: "error"
        });
      }
      let options = {};
      options = {
        mod: this.moudelType,
        img_url: this.imgUrl,
        data_type: this.urlType,
        data: this.url,
        title: this.title
      };
      banner.editBanner(options).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "新增banner成功！",
            type: "success"
          });
          this.getList();
          this.showSystemPopup = false;
        }
      });
    },
    editShow(data) {
      this.showSystemPopup = true;
      this.imgUrl = data.img_url;
      this.moudelType = data.mod;
      this.urlType = data.data_type.toString();
      this.title = data.title;
      this.url = data.data;
      this.bannerId = data.id;
      this.editType = 2;
    },
    editBanner() {
      const options = {
        id: this.bannerId,
        mod: this.moudelType,
        img_url: this.imgUrl,
        data_type: this.urlType,
        data: this.url,
        title: this.title
      };
      banner.editBanner(options).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "编辑banner成功！",
            type: "success"
          });
          this.getList();
          this.showSystemPopup = false;
        }
      });
    },
    hideSystemPopup() {
      this.showSystemPopup = false;
    },
    showBanner(id) {
      const options = {
        id: id,
        status: 1
      };
      banner.setBanner(options).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "设置成功！",
            type: "success"
          });
          this.getList();
        }
      });
    },
    hideBanner(id) {
      const options = {
        id: id,
        status: 2
      };
      banner.setBanner(options).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "设置成功！",
            type: "success"
          });
          this.getList();
        }
      });
    },
    removeBanber(id) {
      const options = {
        id: id
      };
      banner.deleteBanner(options).then(res => {
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: "删除成功！",
            type: "success"
          });
          this.getList();
        }
      });
    },
    screen() {
      this.editType = 1;
      this.moudelType = "";
      this.urlType = "";
      this.title = "";
      this.url = "";
      this.bannerId = "";
      this.imgUrl = "";
      this.showSystemPopup = true;
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.getList();
    },
    getList() {
      this.showNodataTip = false;
      const options = {
        page: this.pages,
        mod: ""
      };
      banner.getBannerList(options).then(res => {
        if (res.code == 1) {
          this.listData = res.data.data;
          this.totalnum = res.data.total;
          if (!res.data.total) {
            this.showNodataTip = true;
          }
        }
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style lang='less'>
.content_table {
  td {
    img {
      max-width: 50px;
    }
  }
}
//裁剪图片
.cropperBox {
  width: 200px;
  height: 200px;
  display: block;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  span {
    display: block;
  }
  .cropper-modal {
    background-color: transparent;
  }
  .cropper-crop-box {
    z-index: -10;
  }
}
</style>
